<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Css3</title>
</head>
<body>
<h1>Css3</h1>

<h3>学习目标</h3>
<ol>
    <li>了解Css3是什么</li>
    <li>了解Css3边框圆角</li>
    <li>了解Css3旋转</li>
    <li>了解Css3动画</li>
</ol>
<br/>


<h4>1. 边框 border-radius</h4>
<dl>
    <dt>简介</dt>
    <dd>
        在 CSS2 中添加圆角棘手。<br/>
        我们不得不在每个角落使用不同的图像。<br/>
        在 CSS3 中，很容易创建圆角。在 CSS3 中 border-radius 属性被用于创建圆角。
    </dd>
    <dt>语法</dt>
    <dd>
        border-radius: 25px;
    </dd>
</dl>
<br/>

<h4>2. 2D转换：transform</h4>
<dl>
    <dt>简介</dt>
    <dd>
        实现页面2D转换，其中旋转和位移的方法：
        <ul>
            <li>rotate()，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。</li>
            <li>translate()，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。</li>
        </ul>
    </dd>
    <dt>语法</dt>
    <dd>
        transform: rotate(30deg); 旋转30度
        <br />
        transform: translate(10px, 10px); 上和左位移10px
    </dd>
</dl>
<br/>

<h4>3. 动画：animation</h4>
<dl>
    <dt>简介</dt>
    <dd>
        创建动画效果
    </dd>
    <dt>语法</dt>
    <dd>
        animation: 动画规则名称 几秒完成 速度曲线 延迟几秒 播放几次
        <pre>
             animation: move 4s linear 2s
        </pre>
        <pre>
            播放次数infinite 表示无限次
        </pre>
    </dd>
    <dt>动画规则</dt>
    <dd>
        动画规则使用 @keyframes 进行创建
        <pre>
    例如: 背景色从 red 变到 yellow
    @keyframes 动画规则名称
    {
        from {background: red;}
        to {background: yellow;}
    }
        </pre>
        <pre>
    例如: 分段动画
    @keyframes 动画规则名称
    {
        0% {background: red;}
        25% {background: yellow;}
        50% {background: blue;}
        75% {background: gray;}
        100% {background: pink;}
    }
        </pre>
    </dd>
</dl>


<h4>课堂练习</h4>
<ol>
    <li>使用css3实现轮播图：练习效果图/轮播图.jpg，实现5图轮播即可，不用考虑其他。图片参考同目录下的图片</li>
    <li>使用css3和js实现：练习效果图/时钟.jpg（高能预警）。</li>
</ol>


</body>
</html>